<{extends file="layout.tpl"}>

<{block name=css}>
<style type="text/css">
	.m-serverGroup-detail li:after{ content: ''; display: block; clear: both; }
	.m-serverGroup-detail li{ line-height: 34px;  margin-bottom: 20px;}
	.m-serverGroup-detail li:last-child{ text-align: center; }
	.m-serverGroup-detail .form-control{ width: 340px; }
	.m-serverGroup-detail .title{ background: #2580A2; color: #fff; padding-left: 8px; }
</style>
<{/block}>


<{block name=content}>
<section class="m-panel-box">
	<h4>服务器组详情配置</h4>
	<div class="m-panel-body">
			<ul class="m-serverGroup-detail">
				<li class="title">服务器组详细信息</li>
				<li>
					<div class="col-md-4">名称</div>
					<div class="col-md-8">
						<input type="text" name="group_name" class="form-control">
					</div>
				</li>
				<li>
					<div class="col-md-4">描述</div>
					<div class="col-md-8">
						<textarea class="form-control" name="group_des"></textarea>
					</div>
				</li>
				<li class="title">服务器组成员</li>
				<li>
					<div class="col-md-4">会员名称服务器</div>
					<div class="col-md-8">
					</div>
				</li>
				<li>
					<div class="col-md-4">会员域名</div>
					<div class="col-md-8">
					</div>
				</li>
				<li>
					<button class="btn btn-md btn-primary saveDetail">保存设置</button>
				</li>
			</ul>
	</div>
</section>
<{/block}>

<{block name=js}>
<script type="text/javascript">

//保存设置按钮功能函数
$('.saveDetail').click(function(){
	var id = window.location.search.split('=')[1];
 	var group_name = $("[name='group_name']").val();
 	var group_description = $('[name="group_des"]').val();
 	ajaxObj('/serverGroup/updateData', 'post', {id, group_name, group_description}, function(obj){
 		if(obj.code == 1){
 			layer.msg(obj.msg);
 		}
 	})
})

//加载服务器详情
 function loadDetail(){
 	var id = window.location.search.split('=')[1];
 	ajaxObj('/serverGroup/getGroupDetails', 'get', {id}, function(obj){
 		$('[name="group_name"]').val(obj.group_name);
 		$('[name="group_des"]').val(obj.group_description);
 	})
 }

 loadDetail();
</script>
<{/block}>